<template>
	<navigator :url="to" class="cardBox">
		<view v-if="images.length === 1" class="singleImageLayout">
			<image :src="images[0]" mode="aspectFill" class="singleImage" />
			<view class="textRight">
				<view class="cardTitle">{{ title }}</view>
				<view class="cardInfo">
					<text v-if="isTop" class="topTag">置顶</text>
					<text class="author">{{ author }}</text>
					<text class="comments">{{ comments }}</text>
					<view class="timeBox">
						<text>{{ time }}</text>
					</view>
				</view>
			</view>
		</view>
		<view v-else>
			<view class="cardTitle">{{ title }}</view>
			<view v-if="images.length > 0" class="cardImageBox">
				<image 
					v-for="(img, i) in (images.length > 3 ? [images[0], images[1], images[2]] : images)" 
					:key="i"
					:src="img"
					mode="aspectFill"
				/>
				<!-- 第三个位置始终存在，避免 flex 布局错乱 -->
				<view v-if="images.length < 3" class="emptySlot"></view>
			</view>
			<view class="cardInfo">
				<text v-if="isTop" class="topTag">置顶</text>
				<text class="author">{{ author }}</text>
				<text class="comments">{{ comments }}</text>
				<view class="timeBox">
					<text>{{ time }}</text>
				</view>
			</view>
		</view>
	</navigator>
</template>

<script>
export default {
	props: {
		title: { type: String, required: true },
		isTop: { type: Boolean, default: false },
		author: { type: String, required: true },
		comments: { type: Number, default: 0 },
		time: { type: String, required: true },
		to: { type: String, required: true },
		images: { type: Array, default: () => [] }
	}
};
</script>

<style scoped>
.cardBox {
	display: block;
	padding: 15rpx;
	margin: 10rpx;
	border-top: 1rpx solid black ;
	background-color: #ffffff;
	box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
	text-decoration: none;
}

.singleImageLayout {
	display: flex;
	align-items: flex-start;
}

.singleImage {
	width: 200rpx;
	height: 200rpx;
	border-radius: 8rpx;
	flex-shrink: 0;
	object-fit: cover;
}

.textRight {
	flex: 1;
	margin-left: 16rpx;
}

.textRight .cardTitle {
	font-size: 32rpx;
	font-weight: bold;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-bottom: 12r。
}

.cardTitle {
	font-size: 32rpx;
	font-weight: bold;
	line-height: 1.4;
	margin-bottom: 12rpx;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.cardImageBox {
	display: flex;
	justify-content: flex-start;
	align-items: stretch;
	width: 100%;
	height: 200rpx;
	margin: 10rpx 0;
	box-sizing: border-box;
}

.cardImageBox image,
.cardImageBox .emptySlot {
	width: 32%;
	height: 100%;
	border-radius: 8rpx;
	object-fit: cover;
	flex-shrink: 0;
}

.cardImageBox .emptySlot {
	background-color: transparent;
}

.cardInfo {
	display: flex;
	align-items: center;
	margin-top: 10rpx;
}

.topTag {
	color: #ff3b30;
	font-weight: bold;
	padding-right: 15rpx;
}

.author {
	font-size: 24rpx;
	margin-right: 12rpx;
	font-weight: bold;
}

.comments {
	font-size: 24rpx;
	margin-right: 12rpx;
	color: #666;
}

.timeBox {
	flex: 1;
	display: flex;
	justify-content: flex-end;
	font-size: 22rpx;
	color: #999;
}
</style>